<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item> <i class="el-icon-lx-calendar"></i> 权限管理 </el-breadcrumb-item>
                <el-breadcrumb-item>权限分配</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="form-box">
                <el-form ref="form" :model="form" label-width="80px" >
                <el-divider content-position="left">权限信息</el-divider>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="权限分配">
                                <el-tree
                                :data="perData"
                                show-checkbox
                                node-key="id"
                                :default-expand-all="true"
                                :default-checked-keys='checkedPer'
                                :props="defaultProps">
                                </el-tree>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="菜单分配">
                                <el-tree
                                :data="menuData"
                                show-checkbox
                                node-key="id"
                                :default-expand-all="true"
                                :default-checked-keys='checkedMenu'
                                :props="defaultProps">
                                </el-tree>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-form-item>
                        <el-button @click="goback" icon="el-icon-arrow-left">返回</el-button>
                        <el-button type="primary" @click="onSubmit('form')" icon="el-icon-edit">修改角色</el-button>
                        <el-button type="warning" @click="reset('form')" icon="el-icon-refresh-right">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'baseform',
    inject: ['reload'],
    data() {
        return {
            id: this.$route.query.id,
            permissions: [],
            role:{},
            menus:[],
            employee:[],
            user:{},

            checkedPer:[],
            checkedMenu:[],

            form: {
                id: '',
                name: '',
                status: '01',
                permissions: [],
                description: ''
            },      
            perData: [],
            menuData:[],
        defaultProps: {
          children: 'children',
          label: 'label'
        }
            
        };
    },
    mounted(){
        this.getRole();
    },
    created: function () {
       
        this.getMenu();
         this.getPers();
        
    },
    methods: {
         /**
         * 获取所有可用角色
         */
        async getRole() {
            var d = await this.$http.get('/role/'+this.id);
            if ((d.code = 200)) {
                this.role = d.data;
                this.initChecked(this.role);
            } else {
                this.$message.error(d.message);
            }   
        },
        /**
         * 获取所有可用权限
         */
        async getPers() {
            let c = {
                status:"01"
            };
            var d = await this.$http.post('/permissionMap', c);
            if ((d.code = 200)) {
                this.permissions = d.data;
                this.initPerData();
            } else {
                this.$message.error(d.message);
            }
        },
        /**
         * 获取所有的菜单
         */
        async getMenu() {
            let c = {
                status:"01"
            };
            var d = await this.$http.post('/menuMap', c);
            if ((d.code = 200)) {
                this.menus = d.data;
                this.initMenuData();
            } else {
                this.$message.error(d.message);
            }
        },

        /**
         * 初始化权限树
         */
        initPerData(){
                this.perData.push({
                    id:"00",
                    label:"权限",
                    children:this.initPermission(),
                })
        },

        /**
         * 初始化资源
         */
        initPermission(){
            let c=[];
            for (let i = 0;i < this.permissions.length;i++) {
                c.push(
                    {
                    id:this.permissions[i].id,
                    label:this.permissions[i].name,
                })
            }
            return c;
        },

        /**
         * 初始化菜单树
         */
        initMenuData(){
           
                this.menuData.push({
                    id:"00",
                    label:"菜单",
                    children:this.initFirstMenu(),
                })
            
        },
        /**
         * 初始化一级菜单
         */
        initFirstMenu(){
            let c=[];
            for (let i = 0; i < this.menus.length; i++) {
             if (this.menus[i].level=='01') {
                 c.push({
                     id:this.menus[i].id,
                     label:this.menus[i].name,
                     children: this.initSecondMenu(this.menus[i].id)
                 })
             }
            }
            return c;
        },
        /**
         * 初始化二级菜单
         */
        initSecondMenu(parentId){
            let c=[];
            for (let i = 0; i < this.menus.length; i++) {
                if (this.menus[i].level=='02' && this.menus[i].parentId==parentId) {
                    c.push({
                        id:this.menus[i].id,
                        label:this.menus[i].name
                    })
                }  
            }
            return c;

        },


        initChecked(role) {
           
                for (let i = 0; i < role.permissions.length; i++) {
                    this.checkedPer.push(role.permissions[i].id)
                }
                for (let c = 0; c < role.menus.length; c++) {
                    this.checkedMenu.push(role.menus[c].id)  
                }
            console.log(this.checkedPer);
            console.log(this.checkedMenu);
           
        },

        onSubmit(formName) {
            // this.form.id = this.id;
            // this.$refs[formName].validate(async (valid) => {
            //     if (valid) {
            //         var d = await this.$http.put('/role', this.form);
            //         if (d.code == 200) {
            //             this.$message.success(d.message);
            //         } else {
            //             this.$message.error(d.message);
            //         }
            //     } else {
            //         this.$message.warning('请把内容填写完整!');
            //     }
            // });
        },

        goback(){
            this.$router.go(-1);
        },

        reset(formName) {
            this.$confirm('此操作将重置所有信息, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    this.initForm(this.role);
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消重置'
                    });
                });
        }
    }
};
</script>